/*

  Yet another <toggle> implementation.
  Based on ::marker  

*/


@set std-toggle {
  
  :root {
    display:inline-block;
    behavior:check;
    flow:stack;
    border:none;
    background:none;
    width:max-content;
    height:1.4em;
    padding:0 0 0 38dip;
    cursor:pointer;
  }

  :root[type="radio"] { behavior:radio; }

  :root::marker {
    width:28dip; 
    height:15dip;
    background:threedlight;
    border-radius:7dip;
    margin:* * * 3dip;
    foreground-image:url(stock:disk);
    foreground-repeat:no-repeat;
    foreground-position:1dip 50%;
    foreground-size:13dip;
    fill:window;
    stroke:threedshadow;
    stroke-width:1dip;
  }
  :root:checked::marker {
    foreground-position:14dip 50%;
    background:highlight;
    transition:foreground-position(quint-in,120ms,quint-out,120ms) background-color(linear,120ms);
  }

  :root > option:first-child { visibility:visible; }
  :root > option:last-child { visibility:hidden; }
  :root:checked > option:first-child { visibility:hidden; }
  :root:checked > option:last-child { visibility:visible; }
  
} 

toggle {
  style-set: std-toggle;
}

